{% extends 'base/base.html' %}
{% load static %}
{% block css %}
<!-- Bootstrap-table -->
<link rel="stylesheet" href="{% static 'css/bootstrap-table.min.css' %}">
<!-- Bootstrap-select -->
<link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}">
{% endblock %}
{% block content %}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>湖南省脑卒中问卷录入总量统计<small id="time"></small></h2>
                <div class="clearfix"></div>
            </div><!-- x_title -->
            <div class="x_content">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <table id="allTable" data-toggle="table" class="table table-bordered table-striped" data-loading-template="loadingTemplate"></table>
                    <br><br>
                    <div class="x_title">
                        <h2>各乡镇街道问卷录入情况查询</h2>
                        <div class="clearfix"></div>
                    </div><!-- x_title -->
                    <!-- 表格工具栏 -->
                    <div id="toolbar">
                        <select id="selectCity" class="selectpicker show-tick" data-style="btn-primary" data-width="fit" title="请选择市" onchange="selectRegion()"></select>
                        <select id="selectRegion" class="selectpicker show-tick" data-style="btn-primary" data-width="fit" title="请选择县或区" onchange="selectTowns()"></select>
                        <select id="selectTowns" class="selectpicker show-tick" data-style="btn-primary" data-width="fit" title="请选择乡镇或街道"></select>
                        <input id="submitData" type="button" class="btn btn-success" style="width: 60px;height: 35px;" value="查询" onclick="submitData()"/>
                    </div><!-- toolbar -->
                    <!-- 表格主体 -->
                    <table id="townTable" data-toggle="table" class="table table-bordered table-striped" data-loading-template="loadingTemplate"></table>
                    <br>
                    <div class="x_title">
                        <h2>可视化图表统计</h2>
                        <div class="clearfix"></div>
                    </div><!-- x_title -->
                    <div id="cityChart" style="width: 100%;height: 400px;"></div>
                </div><!-- col-md-12 col-sm-12 col-xs-12 -->
            </div><!-- x_content -->
        </div><!-- x_panel -->
    </div><!-- col-md-12 col-sm-12 col-xs-12 -->
</div><!-- row -->
<!-- 模态框-0选中提示 -->
<div class="modal fade" tabindex="-1" role="dialog" id="zeroSelect">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
            <h4>请选择完整选择3个选项！</h4>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal">确定</button>
        </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endblock %}

{% block js %}
<!-- Bootstrap-table -->
<script src="{% static 'js/bootstrap-table.min.js' %}"></script>
<!-- Bootstrap-select -->
<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
<script src="/static/js/echarts.js"></script>
<script>
    // 各地区街道数据
    var selectData = [
        {
            "cityName": "株洲市",
            "regionSelect": [
                {
                    "regionName": "醴陵市",
                    "townsSelect": ["白兔潭镇", "丁家坊村卫生室", "东岸村卫生室", "来龙门街道", "明月镇", "上州村卫生室", "泗汾镇"]
                },
                {
                    "regionName": "芦淞区",
                    "townsSelect": ["贺家土街道", "建宁街道", "建设街道", "龙泉街道", "庆云街道"]
                }
            ]
        },
        {
            "cityName": "郴州市",
            "regionSelect": [
                {
                    "regionName": "桂阳县",
                    "townsSelect": ["黄沙坪街道", "鹿峰街道", "仁义镇", "塘市镇"]
                },
                {
                    "regionName": "苏仙区",
                    "townsSelect": ["白露塘镇", "良田镇", "栖凤渡镇", "苏仙岭街道"]
                }
            ]
        },
        {
            "cityName": "常德市",
            "regionSelect": [
                {
                    "regionName": "安乡县",
                    "townsSelect": ["安丰乡", "大湖口镇", "深柳镇", "下鱼口镇"]
                },
                {
                    "regionName": "澧县",
                    "townsSelect": ["大堰垱镇", "甘溪滩镇", "澧阳街道", "梦溪镇"]
                }
            ]
        },
        {
            "cityName": "岳阳市",
            "regionSelect": [
                {
                    "regionName": "汨罗市",
                    "townsSelect": ["白水镇", "弼时镇", "三江镇", "桃林寺镇", "卫健局"]
                },
                {
                    "regionName": "华容县",
                    "townsSelect": ["操军镇","东山镇","卫生健康局","鲇鱼须镇","注滋口镇"]
                }
            ]
        },
        {
            "cityName": "娄底市",
            "regionSelect": [
                {
                    "regionName": "娄星区",
                    "townsSelect": ["黄泥塘社区卫生服务中心", "长青街道社区卫生服务中心", "杉山镇", "蛇形山镇", "蛇形山镇中心卫生院"]
                },
                {
                    "regionName": "新化县",
                    "townsSelect": ["上渡街道社区","古台山林场","炉观镇","枫林街道","桑梓镇卫生院"]
                }
            ]
        },
        {
            "cityName": "益阳市",
            "regionSelect": [
                {
                    "regionName": "沅江市",
                    "townsSelect": ["草尾镇", "琼湖街道", "泗湖山镇", "胭脂湖街道"]
                },
                {
                    "regionName": "桃江县",
                    "townsSelect": ["浮邱山乡","桃花江镇","鸬鹚渡镇","武潭镇","浮邱山乡"]
                }
            ]
        },
        {
            "cityName": "永州市",
            "regionSelect": [
                {
                    "regionName": "冷水滩区",
                    "townsSelect": ["草尾镇", "琼湖街道", "泗湖山镇", "胭脂湖街道"]
                },
                {
                    "regionName": "东安县",
                    "townsSelect": ["井头圩镇","白牙市镇","鹿马桥镇","紫溪市镇","大庙口镇","石期市镇"]
                }
            ]
        },
        {
            "cityName": "张家界市",
            "regionSelect": [
                {
                    "regionName": "永定区",
                    "townsSelect": ["后坪镇", "桥头乡", "阳湖坪办事处", "官黎坪办事处","谢家垭乡","四都坪乡","茅岩河镇","枫香岗办事处"]
                },
                {
                    "regionName": "慈利县",
                    "townsSelect": ["二坊坪镇","赵家岗乡","象市镇","许家坊乡","甘堰乡","龙潭河镇","阳和乡"]
                }
            ]
        },
    ]   
    window.onload = function () {
        //获取城市下拉菜单
        let selectCity = document.getElementById('selectCity')
        //遍历获取城市名称，并将其加入到下拉菜单中
        selectData.forEach((item)=>{
            let option = document.createElement('option')
            let text = document.createTextNode(item.cityName)
            option.appendChild(text)
            selectCity.appendChild(option)
        })
        //加载数据总统计表格
        loadAllTable()
        //加载查询数据表
        loadTownTable()
        //加载城市数据表
        loadCityChart()
        //加载时间
        getTime()
    }
    function selectRegion() {
        removeRegionAndTowns()
        //获取区县下拉菜单
        let selectRegion = document.getElementById('selectRegion')
        //获取已选择的市
        let cityName = $('#selectCity option:selected').val();
        //根据已选择的市进行筛选
        let cityData = selectData.filter((item)=>{
            return item.cityName == cityName
        })
        //获取该市的区县信息
        let regionData = cityData[0].regionSelect
        
        //遍历区县名称加入到下拉菜单中
        regionData.forEach((item)=>{
            let option = document.createElement('option')
            let text = document.createTextNode(item.regionName)
            option.appendChild(text)
            selectRegion.appendChild(option)
        })
        // 刷新必须写否则不生效
        $('#selectRegion').selectpicker('refresh')
    }
    function selectTowns() {
        removeTowns()
        //获取乡镇下拉菜单
        let selectTowns = document.getElementById('selectTowns')
        //获取已选择的市
        let cityName = $('#selectCity option:selected').val();
        //获取已选择的区县
        let regionName = $('#selectRegion option:selected').val();
        //根据已选择的市进行筛选
        let cityData = selectData.filter((item)=>{
            return item.cityName == cityName
        })
        //获取该市的区县信息
        let regionData = cityData[0].regionSelect
        //根据已选择的区县进行筛选
        let townsData = regionData.filter((item)=>{
            return item.regionName == regionName
        })
        //获取该区或县的街道信息
        let townsData2 = townsData[0].townsSelect
        //遍历街道名称加入到下拉菜单中
        townsData2.forEach((item)=>{
            let option = document.createElement('option')
            let text = document.createTextNode(item)
            option.appendChild(text)
            selectTowns.appendChild(option)
        })
        // 刷新必须写否则不生效
        $('#selectTowns').selectpicker('refresh')
    }
    function removeTowns() {
        //获取街道乡镇
        let selectTowns = document.getElementById('selectTowns')
        let options = selectTowns.getElementsByTagName('option')
        for(let i = 0; i < options.length; i++){
            selectTowns.removeChild(options[i]);
            i--;
        }
        $('#selectTowns').selectpicker('refresh')
    }
    function removeRegionAndTowns() {
        //获取街道乡镇和区县
        let selectTowns = document.getElementById('selectTowns')
        let selectRegion = document.getElementById('selectRegion')
        let options1 = selectTowns.getElementsByTagName('option')
        let options2 = selectRegion.getElementsByTagName('option')
        for(let i = 0; i < options1.length; i++){
            selectTowns.removeChild(options1[i])
            i--
        }
        for(let j = 0; j < options2.length; j++){
            selectRegion.removeChild(options2[j])
            j--
        }
        $('#selectRegion').selectpicker('refresh')
        $('#selectTowns').selectpicker('refresh')
    }
    function submitData(){
        //获取选择的信息，进行后端数据请求
        let cityName = $('#selectCity option:selected').val()
        let regionName = $('#selectRegion option:selected').val()
        let townsName = $('#selectTowns option:selected').val()
        if(cityName.length != 0 && regionName.length != 0 && townsName.length != 0){
            loadTownTable()
        }else{
            $('#zeroSelect').modal('show')
        }
    }
    function loadingTemplate(message) {
        return '<i class="fa fa-spinner fa-spin fa-fw fa-2x"></i>'
    }
    function loadTownTable(){
        $('#townTable').bootstrapTable('destroy')
        /* 定义全局请求 */
        var url = '/wenjuanresult/queNum_solve/' //请求数据
        /* 定义表格 */
        $('#townTable').bootstrapTable({
            url: url, //通过url从后台获取数据
            method: 'GET', //请求方式
            dataType: 'json', //数据类型
            uniqueId: 'id', //每一行的唯一标识，一般为主键列
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存
            sortable: true, //是否启用排序
            sortOrder: 'desc', //排序方式
            sidePagination: 'server', //分页方式：client客户端分页，server服务端分页
            undefinedText: '#', //undefined格式数据的默认显示
            singleSelect: false, //开启单选，获取选中的行数必须要有该参数
            toolbar: '#toolbar', //工具按钮选择哪个容器
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            showColumns: true, //是否显示所有的列（选择显示的列）
            minimumCountColumns: 2, //最少允许的列数
            showRefresh: true, //是否显示刷新按钮
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            clickToSelect: true, //是否启用点击选中行
            queryParamsType: "", //自定义的参数，会在url后面进行拼接       
            queryParams: function (params) {
                //获取选择的信息，进行后端数据请求
                let cityName = $('#selectCity option:selected').val()
                let regionName = $('#selectRegion option:selected').val()
                let townsName = $('#selectTowns option:selected').val()
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也要该城遗址的
                var temp = {
                    'City': cityName, //查询内容
                    'Region': regionName,
                    'Towns': townsName,
                }
                return temp;
            },
            columns: [
             /*   {
                 checkbox: true, //第一页显示复选框
                }, */
                {
                    field: 'city',
                    title: '所在的市',
                    align: 'center',
                },
                {
                    field: 'region',
                    title: '所在的区或县',
                    align: 'center',
                },
                {
                    field: 'towns',
                    title: '所在的乡镇或街道',
                    align: 'center',
                },
                {
                    field: 'Que7Tianxie',
                    title: '入户筛查表填写数量',
                    align: 'center',
                },
                {
                    field: 'Que7Tijiao',
                    title: '入户筛查表提交数量',
                    align: 'center',
                },
                {
                    field: 'Que8Tianxie',
                    title: '健康对照表填写数量',
                    align: 'center',
                },
                {
                    field: 'Que8Tijiao',
                    title: '健康对照表提交数量',
                    align: 'center',
                },
                {
                    field: 'Que9Tianxie',
                    title: '脑出血问卷填写数量',
                    align: 'center',
                },
                {
                    field: 'Que9Tijiao',
                    title: '脑出血问卷提交数量',
                    align: 'center',
                },
                {
                    field: 'Que10Tianxie',
                    title: '脑梗塞问卷填写数量',
                    align: 'center',
                },
                {
                    field: 'Que10Tijiao',
                    title: '脑梗塞问卷提交数量',
                    align: 'center',
                },

            ],
        })
    }
    function loadCityChart(){
        var myChart = echarts.init(document.getElementById("cityChart"))
        myChart.showLoading({
            text:'加载中....',
            color: '#c23531',
            textColor: '#000',
        })
        $.ajax({
            type: "get",
            url: "{% url 'getCityNum' %}",
            cache: false,
            success: function (data) {
                city = JSON.parse(data)
                showChart(city)
            }
        })
        function showChart(city) {
            var option = {
                title: [
                    {
                        text: '湖南省各市脑卒中问卷录入情况',
                        left: "center"
                    },
                    {
                        subtext: '入户筛查表',
                        left: '15%',
                        top: '85%',
                        textAlign: 'center'
                    },
                    {
                        subtext: '健康人群问卷',
                        left: '40%',
                        top: '85%',
                        textAlign: 'center'
                    },
                    {
                        subtext: '脑出血患者问卷',
                        left: '60%',
                        top: '85%',
                        textAlign: 'center'
                    },
                    {
                        subtext: '脑梗塞患者问卷',
                        left: '85%',
                        top: '85%',
                        textAlign: 'center'
                    },
                    
                ],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: "horizontal",
                    position: "center",
                    top: "7%"
                },
                series: [
                    {
                        name: "地区",
                        type: 'pie',
                        radius: '40%',
                        center: ['15%', '50%'],
                        data: city[0],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                    },
                    {
                        name: "地区",
                        type: 'pie',
                        radius: '40%',
                        center: ['40%', '50%'],
                        data: city[1],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: "地区",
                        type: 'pie',
                        radius: '40%',
                        center: ['60%', '50%'],
                        data: city[2],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: "地区",
                        type: 'pie',
                        radius: '40%',
                        center: ['85%', '50%'],
                        data: city[3],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                ]
            };
            myChart.hideLoading();
            myChart.setOption(option);
        }
    }
    function loadAllTable(){
        $('#allTable').bootstrapTable('destroy')
        /* 定义请求 */
        var url = '/wenjuanresult/getAllNum/' //请求数据
        /* 定义表格 */
        $('#allTable').bootstrapTable({
            url: url, //通过url从后台获取数据
            method: 'GET', //请求方式
            dataType: 'json', //数据类型
            columns: [
                {
                    field: 'que',
                    title: '问卷名称',
                    align: 'center',

                },
                {
                    field: 'num',
                    title: '问卷数量(份)',
                    align: 'center',
                },
            ],
        })
    }
    function getTime(){
        Date.prototype.Format = function (fmt) { 
        var o = {
            "M+": this.getMonth() + 1, // 月份
            "d+": this.getDate(), // 日
            "h+": this.getHours(), // 小时
            "m+": this.getMinutes(), // 分
            "s+": this.getSeconds(), // 秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        var time = new Date().Format("yyyy-MM-dd hh:mm:ss")
        $('#time').html("截止至"+time)
    }
</script>

{% endblock %}